<script setup>
// 创建路由对象
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {doDelete, doDownload, doGet} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
import FileSaver from 'file-saver';
const router = useRouter()
// 创建线索信息对象
const list = ref([])
// 创建分页对象
const pageInfo = ref({})

// 加载线索列表
const loadData = (current) => {
  doGet('/api/customer/page', {current: current})
      .then(resp => {
        if (resp.data.code === 200) {
          list.value = resp.data.data.list;
          pageInfo.value.total = resp.data.data.total;
        } else {
          showMessage('查询失败，原因：' + resp.data.message, 'error')
        }
      })
}
// 删除客户
const toDel = (id)=>{

  confirmMessage('您确认要删除吗？').then(() => {
    doDelete('/api/customer/'+id, {})
        .then(resp => {
          if (resp.data.code === 200) {
            showMessage('删除成功', 'success')
            loadData(1)
          } else {
            showMessage('删除失败，原因：' + resp.data.message, 'error')
          }
        })
  })

}

// 导出所有数据到Excel
const exportAllExcel = () => {
  doDownload('/api/download/excel/customer', {})
      .then(resp => {
        if (resp.status === 200) {
          // 创建一个Blob对象
          const blob = new Blob([resp.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
          // 使用FileSaver保存文件
          FileSaver.saveAs(blob, 'download_file.xlsx')
        } else {
          showMessage('导出失', 'error')
        }
      })
}


onMounted(() => {
  loadData(1)
})

</script>

<template>
  <el-button type="success" @click="exportAllExcel">导出客户(Excel)</el-button>

  <div>&nbsp;</div>

  <el-table
      :data="list"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55"/>
    <el-table-column label="序号" type="index" width="80"/>
    <el-table-column label="负责人" property="ownerName" width="100"/>
    <el-table-column label="所属活动" property="activityName" width="150"/>
    <el-table-column label="客户姓名" width="80" property="fullName"/>
    <el-table-column label="称呼" width="80" property="appellationName"/>
    <el-table-column label="手机" width="120" property="phone"/>
    <el-table-column label="微信" width="120" property="weixin"/>
    <el-table-column label="是否贷款" width="80" property="needLoanName"/>
    <el-table-column label="意向状态" width="80" property="intentionStateName"/>
    <el-table-column label="意向产品" width="120" property="intentionProductName"/>
    <el-table-column label="线索来源" width="80" property="sourceName"/>
    <el-table-column label="下次联系时间" width="200" property="nextContactTime"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>
</template>

<style scoped>

</style>